<?php
// 从数据库获取轮播图数据
global $wpdb;
$banners = $wpdb->get_results("SELECT * FROM ningm_banner_list");

// 检查是否有轮播图数据
if ($banners):
?>
<div id="carouselExample" class="carousel slide" data-ride="carousel" style="height: 100vh;">
    <div class="carousel-inner" style="height: 100vh;">
        <?php $first = true; ?>
        <?php foreach ($banners as $banner): ?>
            <div class="carousel-item <?php echo $first ? 'active' : ''; ?>" style="height: 100vh;">
                <?php if (!empty($banner->video_url)): ?>
                    <video class="d-block w-100" autoplay muted loop>
                        <source src="<?php echo esc_url($banner->video_url); ?>" type="video/mp4">
                        您的浏览器不支持视频播放。
                    </video>
                <?php else: ?>
                    <img src="<?php echo esc_url($banner->image_url); ?>" class="d-block w-100" alt="<?php echo esc_attr($banner->alt_text); ?>" style="object-fit: cover; height: 100vh;">
                <?php endif; ?>
                <div class="overlay"></div>
                <div class="carousel-caption d-none d-md-block" style="position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%);">
                    <h5 id="random-text" style="animation: jump 1s infinite;">世界那么大，我想去看看</h5>
                    <p><?php echo esc_html($banner->description); ?></p>
                    <a href="<?php echo esc_url($banner->link_url); ?>" class="btn btn-primary">了解更多</a>
                </div>
            </div>
            <?php $first = false; ?>
        <?php endforeach; ?>
    </div>
    <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true" style="filter: drop-shadow(0 0 5px #fff);"></span>
        <span class="sr-only">上一张</span>
    </a>
    <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true" style="filter: drop-shadow(0 0 5px #fff);"></span>
        <span class="sr-only">下一张</span>
    </a>
</div>

<script>
    // 随机文本数组
    const texts = ["你好，世界！", "欢迎来到我的博客", "欢迎来到我的网站", "这里还是不错的。"];
    const randomTextElement = document.getElementById('random-text');

    function changeText() {
        const randomIndex = Math.floor(Math.random() * texts.length);
        randomTextElement.textContent = texts[randomIndex];
    }

    // 每隔一段时间更换一次文本
    setInterval(changeText, 2000);  // 每2秒更换一次文本

    document.addEventListener('DOMContentLoaded', function() {
        var carousel = document.getElementById('carouselExample');
        var items = carousel.querySelectorAll('.carousel-item');
        var currentIndex = 0;
        var intervalTime = 5000; // 增加间隔时间
        var interval;

        function showItem(index) {
            items[currentIndex].classList.remove('active'); // 隐藏当前项
            currentIndex = index;
            if (currentIndex >= items.length) {
                currentIndex = 0;
            }
            items[currentIndex].classList.add('active'); // 显示新项

            // 停止所有视频，播放当前项的视频
            var videos = carousel.querySelectorAll('.carousel-item video');
            videos.forEach(function(video) {
                video.pause();
                video.currentTime = 0; // 重置视频
            });

            var currentVideo = items[currentIndex].querySelector('video');
            if (currentVideo) {
                currentVideo.play(); // 播放新的视频
            }
        }

        function startCarousel() {
            interval = setInterval(function() {
                showItem(currentIndex + 1);
            }, intervalTime);
        }
        
        // 鼠标悬停时暂停自动播放
        carousel.addEventListener('mouseenter', function() {
            clearInterval(interval);
        });

        // 鼠标离开时恢复自动播放
        carousel.addEventListener('mouseleave', startCarousel);

        startCarousel(); // 启动轮播
    });
</script>

<style>
    /* 轮播项样式 */
    .carousel-item {
        position: relative;
        height: 100vh; /* 确保轮播项高度为100vh */
        width: 100%; /* 设置宽度为100% */
        box-sizing: border-box; /* 确保宽度包括内边距和边框 */
        transition: opacity 1s ease-in-out; /* 添加过渡效果 */
        opacity: 0; /* 初始透明度为0 */
    }

    .carousel-item.active {
        opacity: 1; /* 当前项透明度为1 */
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .carousel-item:hover .overlay {
        opacity: 1; /* 悬停时显示覆盖层 */
    }

    .carousel-caption {
        position: absolute;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 添加阴影效果 */
    }

    .carousel-caption h5 {
        font-size: 2rem; /* 调整标题大小 */
        font-weight: bold; /* 加粗标题 */
        animation: jump 1s infinite; /* 添加跳跃动画 */
    }

    @keyframes jump {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    /* 其他样式 */
    .btn-primary {
        background-color: #007bff; /* 按钮背景颜色 */
        border: none;
        font-size: 1rem;
        padding: 10px 20px;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    .btn-primary:hover {
        background-color: #0056b3; /* 悬停时改变按钮颜色 */
    }
</style>

<?php endif; ?>
